﻿@using WebServices.Models
@{
    ViewBag.Title = "Reservations";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Scripts {
    <script>
        var model = {
            reservations: ko.observableArray(),
            editor: {
                name: ko.observable(""),
                location: ko.observable("")
            },
            displaySummary: ko.observable(true)
        };
        function sendAjaxRequest(httpMethod, callback, url, reqData) {
            $.ajax("/api/web" + (url ? "/" + url : ""), {
                type: httpMethod,
                success: callback,
                data: reqData
            });
        }
        function getAllItems() {
            sendAjaxRequest("GET", function (data) {
                model.reservations.removeAll();
                for (var i = 0; i < data.length; i++) {
                    model.reservations.push(data[i]);
                }
            });
        }
        function removeItem(item) {
            sendAjaxRequest("DELETE", function () {
                for (var i = 0; i < model.reservations().length; i++) {
                    if (model.reservations()[i].ReservationId == item.ReservationId) {
                        model.reservations.remove(model.reservations()[i]);
                        break;
                    }
                }
            }, item.ReservationId);
        }
        function handleCreateClick() {
            model.displaySummary(false);
        }
        function handleEditorClick() {
            sendAjaxRequest("POST", function (newItem) {
                model.reservations.push(newItem);
                model.displaySummary(true);
            }, null, {
                ClientName: model.editor.name,
                Location: model.editor.location
            });
        }
        $(document).ready(function () {
            getAllItems();
            ko.applyBindings(model);
        });
    </script>
}

@section Body {
    <div id="summary" class="section panel panel-primary" data-bind="if: model.displaySummary">
        <div class="panel-heading">Reservation Summary</div>
        <div class="panel-body">
            <table class="table table-striped table-condensed">
                <thead>
                    <tr><th>ID</th><th>Name</th><th>Location</th><th></th></tr>
                </thead>
                <tbody data-bind="foreach: model.reservations">
                    <tr>
                        <td data-bind="text: ReservationId"></td>
                        <td data-bind="text: ClientName"></td>
                        <td data-bind="text: Location"></td>
                        <td>
                            <button class="btn btn-xs btn-primary" data-bind="click: removeItem">
                                Remove
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-primary" data-bind="click: handleCreateClick">
                Create
            </button>
        </div>
    </div>
    <div id="editor" class="section panel panel-primary"
         data-bind="ifnot: model.displaySummary">
        <div class="panel-heading">
            Create Reservation
        </div>
        <div class="panel-body">
            <div class="form-group">
                <label>Client Name</label>
                <input class="form-control" data-bind="value: model.editor.name" />
            </div>
            <div class="form-group">
                <label>Location</label>
                <input class="form-control" data-bind="value: model.editor.location" />
            </div>
            <button class="btn btn-primary" data-bind="click: handleEditorClick">
                Save
            </button>
        </div>
    </div>
}